<template>
  <div class="banner">
    <swiper :style="bannerStyle" ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(el, idx) in imgs" :key="idx">
        <slot name="slide" :el="el">
          <img :src="el" />
          <!-- 我是插槽 -->
        </slot>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
// 快速使用轮播, 通过插槽可以自定义 swiper-slide 内容, 默认接收数组
// ["xxxx.jpg","xxxx.jpg","xxxx.jpg"] 可以直接渲染
// 如果接收数据比较复杂(如下), 使用具名插槽在外部自定义 slide 结构即可
// [{
//  url:"xxxx.jpg",
//  name:"我是哈哈哈"
// },{
//  url:"xxxx.jpg",
//  name:"我是哈哈哈"
// },{
//  url:"xxxx.jpg",
//  name:"我是哈哈哈"
// }]
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";

// import style (>= Swiper 6.x)
// import "swiper/swiper-bundle.css";

// import style (<= Swiper 5.x)
import "swiper/css/swiper.css";

export default {
  props: {
    imgs: {
      type: Array,
      // required: true,
    },
    bannerStyle: Object,
    swiperOptions: {
      type: Object,
      default: () => {
        return {
          loop: true,
          // autoplay: true,
        };
      },
    },
  },
  data() {
    return {};
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
}
.swiper-slide img {
  width: 100%;
}
</style>